<template>
	<div class="detail-item">
		<div class="item_2 item">
      <div class="title">
        基本信息
      </div>
      <div class="list">
        <span>渠道来源：</span>
        <div class="right">
          <span>自动下载</span>
        </div>
      </div>
      <div class="list">
        <span>用户昵称：</span>
        <div class="right">
          <span>
            <img class="icon" src="/static/img/u913.png"/>
            阿奇
          </span>
        </div>
      </div>
      <div class="list">
        <span>店铺logo：</span>
        <div class="right">
          <img class="logo" src="/static/img/u5291.png"/>
        </div>
      </div>
      <div class="list">
        <span>登录账号：</span>
        <div class="right">
          <span>13333333333</span>
        </div>
      </div>
      <div class="list">
        <span>注册时间：</span>
        <div class="right">
          <span>2019-08-07</span>
        </div>
      </div>
      <div class="list">
        <span>手机型号：</span>
        <div class="right">
          <span>Iphone XR</span>
        </div>
      </div>
      <div class="list">
        <span>手机IME号：</span>
        <div class="right">
          <span>2672838829991991112</span>
        </div>
      </div>
      <div class="list">
        <span>所在地区：</span>
        <div class="right">
          <span>安徽-合肥</span>
        </div>
      </div>
      <div class="list">
        <span>注册定位：</span>
        <div class="right">
          <span class="blue">
            <img class="icon" src="/static/img/u178.png"/>
            安徽省合肥市庐阳区万科森林公园
          </span>
        </div>
      </div>
      <div class="list">
        <span>活动区域：</span>
        <div class="right">
          <span>共【<el-button @click="editRow" type="text" size="small">21</el-button>】个经常活动区域</span>
        </div>
      </div>
      <div class="list">
        <span>用户标签：</span>
        <div class="right">
          <span>洗车</span>
        </div>
      </div>
    </div>
    <div class="item_2 item">
      <div class="title">社交信息</div>
      <div class="list">
        <span>话题：</span>
        <div class="right">
          <span>发布【7】，回复【120】</span>
        </div>
      </div>
      <div class="list">
        <span>社交活跃度：</span>
        <div class="right">
          <span>2.39</span>
        </div>
      </div>
      <div class="list">
        <span>APP活跃：</span>
        <div class="right">
          <span>7日打开次数【7】，7日停留时间【120小时】</span>
        </div>
      </div>
      <div class="list">
        <span>APp活跃度：</span>
        <div class="right">
          <span>2.39</span>
        </div>
      </div>
      <div class="title" style="margin-top: 35px;">实名认证信息</div>
      <div class="list">
        <span>姓名：</span>
        <div class="right">
          <span>鲁班</span>
        </div>
      </div>
      <div class="list">
        <span>身份证号码：</span>
        <div class="right">
          <span>122211111111111111</span>
        </div>
      </div>
      <div class="list">
        <span>身份证图片：</span>
        <div class="right">
          <img class="pic" src="/static/img/u168.png"/> 
          <img class="pic" src="/static/img/u168.png"/> 
        </div>
      </div>
    </div>
    <!-- 活动区域 -->
    <el-dialog  :visible.sync="boo.showDialog" class="jx-dialog" width="65%">
      <div slot="title" class="header-title">
        <span class="title-name">活动区域</span>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="列表显示" name="first">
          <div class="jx-table">
            <el-table :data="activelist" border style="width: 100%" v-loading="boo.loading">
              <el-table-column type="index" label="序列" width="60" align="center">
              </el-table-column>
              <el-table-column prop="item1" label="所在地区" width="120" align="center">
              </el-table-column>
              <el-table-column prop="item2" label="所属商圈" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item3" label="详细地址" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span><img class="icon" src="/static/img/u178.png"/>{{scope.row.item3}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="item4" label="最近一次时间" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="item5" label="7日停留" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span>{{scope.row.item5}}天</span>
                </template>
              </el-table-column>
              <el-table-column prop="item6" label="累计停留" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span>{{scope.row.item6}}天</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="地图显示" name="second">
          <baidu-map class="map" :style="{width:map.width,height:map.height}" :center="{lng: map.center.lng, lat: map.center.lat}" ak="6L8ztzxMpKhac2issa1rETQz82OBpmZo" :zoom="map.zoom" @ready="handler" :scroll-wheel-zoom="true">
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
            <bml-marker-clusterer :averageCenter="true">
              <bm-marker v-for="(item,index) of markers" :key="index" :position="{lng: item.lng, lat: item.lat}"></bm-marker>
            </bml-marker-clusterer>
          </baidu-map>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
	</div>
</template>

<script>
  const activelist = [
    {item1: '安徽-合肥',item2: '万科森林公园',item3: '安徽省合肥市庐阳区万科中心',item4: '2019-08-08',item5: '0.46',item6: '21'},
    {item1: '安徽-合肥',item2: '财富广场',item3: '安徽省合肥市庐阳区万科中心',item4: '2019-08-08',item5: '0.46',item6: '21'}
  ]
  //百度地图
  import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
  import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
  import BmMarkerClusterer from  'vue-baidu-map/components/extra/MarkerClusterer'
  import BmMarker from 'vue-baidu-map/components/overlays/Marker'
	export default {
    name: "pm-distribution",
    components: {
      BaiduMap,
      BmNavigation,
      BmMarkerClusterer,
      BmMarker,
    },
		data() {
			return {
        boo: {
          showDialog: false,
          saveing: false,
          loading: false,
        },
        activeName: 'first',
        activelist: activelist,
        map:{ 
            center: {lng: 116.404, lat: 39.915},
            zoom: 4,
            width:'100%',
            height:'400px'
        },
        markers:[],
			}
		},
		mounted(){
      let _self = this
      // _self.getMap()
    },
		methods: {
      editRow(){
        let _self = this
        _self.boo.showDialog = true
      },
      handler ({BMap, map}) {
        this.map.center.lng = 116.404
        this.map.center.lat = 39.915
        this.map.zoom = 5
        this.map.height=document.body.clientHeight -160+'px';
        this.getProPositionMap();
      },
      //项目分布地图
      getProPositionMap(){
        for (let i = 0; i < 10; i++) {
          const position = {lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21}
          this.markers.push(position)
        }
      },
    }
	}

</script>
<style scoped lang="sass">
  .jx-table
    .el-table 
      .cell
        .icon
          width: 16px
          height: 17px
          position: relative
          top: 2px
  .map 
    width: 100%
    height: 300px
    .BMap_Marker.BMap_noprint 
      background: url('/static/img/marker_red_sprite.png') no-repeat
</style>
